Formidable.Classes.ModalBox = Formidable.Classes.RdtBaseClass.extend({
	
	aSelect: [],
	oImgClose: null,
	oHtmlContainer: null,
	defConfig: {
		"effects": true,
		showclosebutton: true,
		followScrollVertical: true,
		followScrollHorizontal: true,
		positionStyle: {
			"display": "none",
			"position": "absolute",
			"zIndex": 2000		// z-index, camel case
		},
		style: {
			"width": "auto",
			"background": "silver",
			"padding": "10px",
			"borderWidth": "2px",
			"borderStyle": "solid",
			"borderColor": "white",
			"MozBorderRadius": "3px"	// -moz-border-radius, camel case
		}
	},
	constructor: function(config) {
		this.base(config);
		this.overlay = "tx_ameosformidable_modalboxoverlay";
		this.box = "tx_ameosformidable_modalboxbox";
	},
	domNode: function() {
		return $(this.box);
	},
	hideSelects: function() {
		
		this.aSelect = [];

		aTemp = $$("body select");
		aTempNoHide = $$("#" + this.box + " select");

		var _this = this;
		aTemp.each(function(oSelect, k) {
			if(aTempNoHide.indexOf(oSelect) == -1) {
				if(Element.getStyle(oSelect, "visibility") == "" || Element.getStyle(oSelect, "visibility") == "inherit" || Element.getStyle(oSelect, "visibility") == "visible") {
					oSelect.style.visibility = "hidden";
					_this.aSelect.push(oSelect);
				}
			}

		});
	},
	showSelects: function() {
		
		this.aSelect.each(function(oSelect, k) {
			
			if(Element.getStyle(oSelect, "visibility") == "hidden") {
				oSelect.style.visibility = "visible";
			}

		});

		this.aSelect = [];
	},
	resizeOverlay: function() {
		$(this.overlay).style.width = document.body.clientWidth + "px";
	},
	showBox: function(aData){
		this.config = Object.extend(this.defConfig, this.config);
		this.config.style = Object.extend(this.config.style, aData.style || {});
		//this.config.showclosebutton = false;

		if(!$(this.overlay)) {
			document.body.appendChild(
				$div({
					id:		this.overlay,
					style:	"display: none; background-color: black; position: absolute; top: 0px; left: 0px; z-index: 1000; width: 100%; height: 100%; padding: 0; margin: 0; opacity:0.6; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);"
				})
			);
		}

		if(!$(this.box)) {

			oDivBox = $div({
				id:		this.box
			});

			if(this.config.showclosebutton) {
				this.oImgClose = $img({
					src: Formidable.path + "res/images/modalboxclose.gif",
					style: "position:absolute; top:-5px; right:-5px; cursor:pointer;"
				});
			}

			oTextNode = $div();
			this.oHtmlContainer = oTextNode;
			oTextNode.innerHTML = aData.html;
			oTextNode.select("IMG").each(function(o, k) {
				console.log(o);
				Event.observe(o, "load", function() {
					this.align();
				}.bind(this));
			}.bind(this));

			if(this.config.showclosebutton) {
				oDivBox.appendChild(this.oImgClose);
			}
			oDivBox.appendChild(oTextNode);

			document.body.appendChild(oDivBox);
			
			Element.setStyle(oDivBox, this.config.style);
			Element.setStyle(oDivBox, this.config.positionStyle);

			for(var sKey in aData.attachevents) {
				Formidable.globalEval(aData.attachevents[sKey]);
			};
		}
		
		if(Formidable.Browser.name == "internet explorer") {
			if(Formidable.Browser.version < 7) {
				this.hideSelects();
			}
			this.resizeOverlay();
		}

		this.onScrollPointer = this.scroll.bindAsEventListener(this);
		this.onClosePointer = this.close.bindAsEventListener(this);
		Event.observe(window, "scroll", this.onScrollPointer);
		
		
		this.alignFirst();
		var _this = this;

		if(this.config.effects) {

			new Effect.Appear($(this.box), {
				duration: 0.5,
				fps: 50,
				afterFinish: function() {
					if(this.config.showclosebutton) {
						Event.observe(this.oImgClose, "click", this.onClosePointer);
					}
				}.bind(this)
			});
			
			$(this.overlay).show();

		} else {
			if(this.config.showclosebutton) {
				Event.observe(this.oImgClose, "click", this.onClosePointer);
			}
			$(this.overlay).show();
			$(this.box).show();
		}

		return this;
	},
	closeBox: function() {
		
		if(this.config.effects) {
			var _this = this;

			window.setTimeout(
				function() {
					if($(this.overlay)) {
						$(this.overlay).hide();
					}
				}.bind(this),
				250
			);

			new Effect.Fade($(this.box), {
				duration: 0.3,
				fps: 50,
				afterFinish: function() {	
					_this.restoreOnHide();
				}
			});
		} else {
			$(this.overlay).hide();
			$(this.box).hide();
			this.restoreOnHide();
		}

		return false;
	},
	restoreOnHide: function() {

		if(Formidable.Browser.name == "internet explorer") {
			if(Formidable.Browser.version < 7) {
				this.showSelects();
			}
		}

		if($(this.box)) {
			if(this.config.showclosebutton) {
				Event.stopObserving(this.oImgClose, "click", this.onClosePointer);
				DOM.remove(this.oImgClose);
			}
			DOM.remove($(this.box));
		}

		if($(this.overlay)) { DOM.remove($(this.overlay));}

		Event.stopObserving(window, "scroll", this.onScrollPointer);
		this.onScrollPointer = null;
		this.onClosePointer = null;
	},
	onScrollPointer: null,
	onClosePointer: null,
	alignFirst: function() {
		Formidable.Position.fullScreen($(this.overlay));
		Formidable.Position.putCenterHorizontal(this.box);
		Formidable.Position.putFixedToWindowVertical(this.box, 30);
	},
	align: function() {
		Formidable.Position.fullScreen($(this.overlay));
		if(this.config.followScrollVertical) {
			Formidable.Position.putFixedToWindowVertical(this.box, 30);
		}

		Formidable.Position.putCenterHorizontal(this.box);
	},
	scroll: function() {
		Formidable.Position.fullScreen($(this.overlay));
		
		if(this.config.followScrollVertical) {
			Formidable.Position.putFixedToWindowVertical(this.box, 30);
		}

		if(this.config.followScrollHorizontal) {
			Formidable.Position.putCenterHorizontal(this.box);
		}
	},
	close: function(e) {
		Formidable.f(this.config.formid).o(this.config.id).closeBox();
	},
	repaint: function(sHtml) {
		this.oHtmlContainer.innerHTML = sHtml;
/*		this.oHtmlContainer.select("IMG").each(function(o, k) {
			console.log(o);
			Event.observe(o, "load", function() {
				this.align();
			}.bind(this));
		}.bind(this));*/
		this.align();
	}
});